<template>
	<view class="content">
		<!-- <view class="header">
			<image src="../../static/shilu-login/logo.png"></image>
		</view> -->
		<view class="main_content">
			<view class="page_content">
				<view class="bgsimg">
					<image src="/static/shilu-login/login_bgs.png" style="height: 490px;width: 385px;" mode=""></image>
				</view>
				<view class="head_content">
					<view class="title" style="text-align: center;font-size: 31px; color: #fff;">Rolling Short</view>
				</view>
				<view class="main_content">
					<view class="popup_wrap">
						<view class="head_box">
							<view class="title">
								注册
							</view>
						</view>
						<view class="list">
							<view class="list-call">
								<image class="img" src="/static/shilu-login/33.png"></image>
								<input class="sl-input" v-model="name" type="text"
									:placeholder="placeholderfrom.placeholder1" />
							</view>
							<view class="list-call">
								<image class="img" src="/static/shilu-login/12.png"></image>
								<input class="sl-input" v-model="email" type="email"
									:placeholder="placeholderfrom.placeholder2" />
							</view>
							<view class="list-call">
								<image class="img" src="/static/shilu-login/3.png"></image>
								<input class="sl-input" v-model="code" type="number" maxlength="4"
									:placeholder="placeholderfrom.placeholder3" />
								<view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view>
							</view>
							<view class="list-call">
								<image class="img" src="/static/shilu-login/22.png"></image>
								<input class="sl-input" v-model="password" type="text" maxlength="32"
									:placeholder="placeholderfrom.placeholder4" :password="!showPassword" />
								<image class="img" style="margin-right: 12px;"
									:src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'"
									@tap="display"></image>
							</view>
							<view class="list-call">
								<image class="img" src="/static/shilu-login/99.png"></image>
								<u-radio-group v-model="radiovalue1" placement="row"
									style="margin-left: 10px;margin-top: 10px;" @change="groupChange">
									<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
										:key="index" :label="item.name" :name="item.name" @change="radioChange">
									</u-radio>
								</u-radio-group>
							</view>
							<view class="list-call" @click="handlecall">
								<image class="img" src="/static/shilu-login/11.png"></image>
								<text class="picker-label" v-if="Birthday==''">{{$t('text.nyr')}}</text>
								<text class="picker-label" v-else>{{Birthday}}</text>
								<u-datetime-picker :show="showTime" v-model="value1":minDate="'1900-01-01'" mode="date" @cancel="handleCancel"
									@confirm='confirm' :closeOnClickOverlay='true'></u-datetime-picker>
							</view>
						</view>
						<view class="button-login" hover-class="button-hover" @tap="bindLogin">
							<text style="font-size: 40upx;">{{$t('text.register')}}</text>
						</view>

						<view class="agreement">
							<image @tap="agreementSuccess"
								:src="agreement==true?'/static/shilu-login/ty1.png':'/static/shilu-login/ty0.png'">
							</image>
							<text @tap="agreementSuccess"> {{$t('login.agree')}}</text>
							<navigator url="xieyi">{{$t('login.user')}}</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var _this, js;
	export default {
		onLoad(e) {
			if (e.uid) {
				this.invitation = e.uid
			} else {
				var fxpid = uni.getStorageSync("fxpid")
				if (fxpid) {
					this.invitation = fxpid
				}
			}
			this.getList();
		},
		onUnload() {
			clearInterval(js)
			this.second = 0;
		},
		data() {
			return {
				placeholderfrom: {
					placeholder1: this.$t('user.username'),
					placeholder2: this.$t('text.email'),
					placeholder3: this.$t('text.captcha'),
					placeholder4: this.$t('text.input.password'),
					// placeholder4:this.$t('text.nyr'),

				},
				name: '',
				Birthday: '',
				Password: '',
				email: '',
				showTime: false,
				phone: '',
				password: '',
				code: '',
				invitation: '',
				agreement: true,
				showPassword: false,
				second: 0,
				iskq: 0,
				radiolist1: [{
						name: this.$t('text.male'),
						disabled: false
					},
					{
						name: this.$t('text.female'),
						disabled: false
					},
					{
						name: this.$t('text.unknown'),
						disabled: false
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: this.$t('text.male'),
				value1: Number(new Date()),
			};
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return this.$t('text.getcode');
				} else {
					if (this.second < 10) {
						// return '重新获取0' + this.second;
						return this.$t('text.recode') + this.second;
					} else {
						return this.$t('text.recode1') + this.second;
						// return '重新获取' + this.second;
					}
				}
			}
		},
		onUnload() {
			this.clear()
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			handlecall() {
				this.showTime = true
			},
			handleCancel() {
				this.showTime = false
			},
			confirm(e) {
				this.Birthday = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showTime = false
			},
			clear() {
				clearInterval(js)
				js = null
				this.second = 0
			},
			display() {
				this.showPassword = !this.showPassword
			},
			agreementSuccess() {
				this.agreement = !this.agreement;
			},
			async getcode() {
				if (this.second > 0) {
					return;
				}
				this.second = 60;

				const _this = this; // 保证上下文中的 this 指向正确
				let js = setInterval(function() {
					_this.second--;
					if (_this.second === 0) {
						_this.clear(js); // 调用清除计时器的方法
					}
				}, 1000);

				var data = {
					'email': this.email
				};

				let [err, res] = await this.$httpas.post('/api/ems/send', data);
				if (!this.$httpas.errorCheck(err, res)) return;

				console.log(res.data.ok)
				console.log(res.data.data)
				if (res.data.ok == 1) {
					uni.setStorage({
						key: 'yzmss',
						data: res.data.data
					})
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			clear(js) {
				clearInterval(js);
			},
			bindLogin() {
				if (this.agreement == false) {
					uni.showToast({
						icon: 'none',
						title: this.$t('setting.rjyonhu')
					});
					return;
				}
				this.zc();
			},
			async zc() {
				let _this = this;
				let data = {
					'email': this.email,
					'nickname': this.name,
					'password': this.password,
					'birthday': this.Birthday,
					'gender': this.radiovalue1,
					'code': this.code,
					'pid': this.invitation
				};
				if (this.openid) {
					data.openid = this.openid
					data.nickName = this.nickName
					data.avatarUrl = this.avatarUrl
				}
				let [err, res] = await this.$httpas.post('/api/user/reg', data);
				if (!this.$httpas.errorCheck(err, res)) return;

				if (res.data.code === 1) {
					uni.showModal({
						title: '',
						content: res.data.msg,
						showCancel: false,
						confirmText: this.$t('text.qd'),
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack();
							} else if (res.cancel) {

							}
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			getList() {
				let data = {};
				var limit = 15;
				data.limit = limit
				data.ishot = 2
				uni.request({
					url: this.configs.webUrl + '/api/video/lists',
					data: data,
					success: data => {
						//console.log(data.data)
						uni.setStorage({ //缓存配置信息
							key: 'config',
							data: data.data.config
						})
						if (uni.getStorageSync("config").iskq) {
							this.iskq = uni.getStorageSync("config").iskq;
						}
					},
					fail: (data, code) => {}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.main_content {
		// padding: 14px 15px;

		.page_content {
			padding-top: 0px;
			// height: 640px;
			position: relative;
			background: #101010;

			.bgsimg {
				// width: 360px;
				position: absolute;
				// top: 0;
				// left: 0;
				right: 12rpx;
			}
		}

		.head_content {
			position: relative;
			// top: 30px;
		}

		.main_content {
			position: relative;
			padding: 14px 15px;

			// margin-top: 30%;
			.popup_wrap {
				border-radius: 4px;
				border: 1px solid hsla(0, 0%, 100%, .2);
				-webkit-backdrop-filter: blur(24px);
				backdrop-filter: blur(24px);
				background: hsla(0, 0%, 100%, .02);
				position: relative;
				padding: 14px;
			}

			.head_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.title {
					font-size: 15px;
					color: #fff;
				}
			}

			.input_box {
				margin-top: 14px;

				.type {
					position: absolute;
					top: 0;
					left: 0;
					-webkit-transform: translateY(calc(-100% - 19px));
					transform: translateY(calc(-100% - 19px));
					display: flex;
					align-items: center;

					.item:first-child {
						border-radius: 4px 0 0 4px;
					}

					.item {
						padding: 4px 9px;
						color: #fff;
						font-size: 13px;
						border: 1px solid #fe2a47;
					}

					.active {
						background: #fe2a47;
					}
				}

			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		// padding-left: 70rpx;
		// padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 48px;
		color: #fff;
		border: 0.5px solid #e2e2e2;
		margin-top: 14px;
		border-radius: 12rpx;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 24rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.yzm {
		/* color: #FF7D13; */
		color: #999;
		font-size: 24rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: auto;
		height: 64rpx;
		/* border: 1rpx solid #FFA800; */
		border: 1rpx solid #999;
		border-radius: 50rpx;
		margin-right: 12rpx;
	}

	.yzms {
		color: #999999 !important;
		border: 1rpx solid #999999;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 550rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #8134af, #515bd4);
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 12rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(90deg, #8134af, #515bd4);
	}

	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #999;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreement image {
		width: 40rpx;
		height: 40rpx;
	}

	.picker-label {
		font-size: 17px;
		color: #666;
		margin-left: 10px;
	}

	.selected-date {
		font-size: 14px;
		color: #333;
	}
</style>